<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>浮动</title>
        <style>
			.clear{ clear:both;}
        	.fu{
				width:1000px;
				margin:10px auto;
				border:2px solid red;
				}
        	.son1{
				width:200px;
				height:40px;
				background:#0FF;
				float:left;}
			.son2{
				width:400px;
				height:40px;
				background:#0F0;
				float:right;}
			.fx{
				width:900px;
				height:200px;
				border:2px solid;
				}
			.p1{
				width:200px;
				height:100px;
				border:2px solid;}
        </style>
    </head>
    
    <body>
    	<div class="fu">
        	<div class="son1"></div>
            <div class="son2"></div>
            
        </div>
     	<div class="fx">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        
        <p class="p1">
        	要点：
        1.浮动用于布局页面，解决display设为行内块级之后有间距的问题
        2.浮动分左右浮动，是样式声明，多个div同排浮动都设为左浮动
        3.浮动完之后需要清除浮动，方法就是加个空的div div的类样式声明里写clear:both; 哪里结束浮动，就在哪里清除浮动
        4.当父级标签没有固定的高时，子级盒子有浮动，此时父级无高度，当清除浮动后，父级会被子级撑开，高的值和子级一样 即清除浮动有扩展盒子高度的效果-
        </p>
        
        <!--要点：
        1.浮动用于布局页面，解决display设为行内块级之后有间距的问题
        2.浮动分左右浮动，是样式声明，多个div同排浮动都设为左浮动
        3.浮动完之后需要清除浮动，方法就是加个空的div div的类样式声明里写clear:both; 哪里结束浮动，就在哪里清除浮动
        4.当父级标签没有固定的高时，子级盒子有浮动，此时父级无高度，当清除浮动后，父级会被子级撑开，高的值和子级一样 即清除浮动有扩展盒子高度的效果
        5.overflow对溢出部分进行处理，常用overflow:hidden; 同时在子级有浮动的父级盒子里加overflow:hidden;可以起到清除浮动的作用，还能扩展父级盒子的高度，只是在有定位时只能用clear来清除浮动了。-->
    </body>
</html>
